<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="activationDialogVisible"
             title="强制解锁"
             @close="handleClose"
             @open="handleOpen">
    <el-card class="box-card">
      <el-table :data="tableData" border height="400" stripe style="width: 100%;">
        <el-table-column align="center" label="会员名称" prop="nickName" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="关注时间" prop="registrationDate"></el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button icon="el-icon-s-custom" size="small" type="warning" @click="handleActivation(scope.row)">激活
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="memberListAfterFilter.length"
                       layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
    </el-card>
  </el-dialog>
</template>
// TODO 功能还没实现
<script>
import {mapGetters} from 'vuex'
import {activateMember, getNotActiveMembers} from '@/api/member'

export default {
  name: 'ForceUnlockDialog',
  data () {
    return {
      reportData: {},
      memberList: [],
      currentPage: 1,
      nameToFilter: ''
    }
  },
  computed: {
    ...mapGetters([
      'shiftInfo',
      'stationName',
      'stationId',
      'activationDialogVisible',
      'pageSize'
    ]),
    memberListAfterFilter () {
      return this.memberList.filter(item => {
        return item.nickName.indexOf(this.nameToFilter) > -1
      })
    },
    tableData () {
      if (this.currentPage * this.pageSize > this.memberListAfterFilter.length) {
        return this.memberListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.memberListAfterFilter.length)
      } else {
        return this.memberListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    }

  },
  mounted () {
  },
  methods: {
    handleClose () {
      this.$store.dispatch('hideActivationDialog')
    },
    handleOpen () {
      this.getMemberList()
      this.$store.dispatch('showActivationDialog')
    },
    getMemberList () {
      getNotActiveMembers().then(res => {
        console.log(res)
        this.memberList = res.data
      })
    },
    handleActivation (rowData) {
      console.log('handleActivation')
      console.log(rowData)
      this.$prompt('请输入电话号码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
        inputErrorMessage: '电话号码格式不正确'
      }).then(({value}) => {
        activateMember({
          openid: rowData.openid,
          stationId: this.stationId,
          phone: value
        }).then(res => {
          console.log(res)
          this.$message.success(res.msg || '会员激活成功！')
          setTimeout(() => {
            this.getMemberList()
          }, 3000)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        console.log('cancel')
      })
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    }

  }
}
</script>

<style scoped>
.box-card {
  margin: 0 auto;
  overflow-y: auto;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
}

.pager {
  width: 100%;
  text-align: center;
  background: white;
}
</style>